<HTML>
<!--
THE JAVASCRIPT COOKBOOK by Erica Sadun, webrx@mindspring.com
J. Brook Monroe, mrprogguy@techie.com
Copyright (c)2000 by Charles River Media. All Rights Reserved.
This applet can only be re-used or modifed by license holders of the
JavaScript Cookbook CD-ROM. Credit must be given in the source
code and this copyright notice must be maintained. If you do
not hold a license to the JavaScript Cookbook, you may NOT
duplicate or modify this code for your own use.
Use at your own risk. No warranty is given or implied of the suitability
of this applet for any specific application. Neither Erica Sadun,
J. Brook Monroe nor Charles River Media will be held responsible for any
unwanted effects due to the use of this applet or any derivative.
-->
<HEAD>
<TITLE>Wandering All Over</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2"><!--
function getMove(evt)
{
document.forms[0].atx.value = evt.layerX;
document.forms[0].aty.value = evt.layerY;
return routeEvent(evt); // Just in case
}
function Setup()
{
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove=getMove;
}
function TidyUp()
{
window.releaseEvents(Event.MOUSEMOVE);
}
//-->
</SCRIPT>
</HEAD>
<BODY onUnload="TidyUp()">
<FONT COLOR="007777"><H1><IMG SRC="../GRAFX/UTENS.JPG" WIDTH=80 HEIGHT=50 ALIGN = LEFT>Wandering All Over</H1></FONT>
<BLOCKQUOTE><FONT COLOR="770000">
Move the mouse and watch the numbers change!
</FONT>
<FORM>Mouse X: <INPUT TYPE="text" SIZE=4 NAME="atx"> Mouse Y: <INPUT TYPE="text" SIZE=4 NAME="aty">
</FORM><p>
<SCRIPT LANGUAGE="JavaScript1.2">Setup()</SCRIPT>
<FONT COLOR="007777"><H2>Discussion</H2></FONT>
<FONT SIZE=4>
The sheer amount of material covered in <A HREF="EVENTS.HTM"><FONT COLOR="#007777">Cutting in Front of the Line</FONT></a> was
probably enough to make you think that handling the new interface events is practically impossible. Nothing could be
further from the truth. The "dancing numbers" in the form above were created by just 6 lines of JavaScript code (not counting
the function headers, of course):
<FONT COLOR="#770000" SIZE=3><PRE>
function getMove(evt)
{
document.forms[0].atx.value = evt.layerX;
document.forms[0].aty.value = evt.layerY;
return routeEvent(evt); // Just in case
}
function Setup()
{
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove=getMove;
}
function TidyUp() // Called by onUnload
{
window.releaseEvents(Event.MOUSEMOVE);
}
</PRE></FONT>
</FONT>
<BR><BR><h5>Copyright ©2000 by Charles River Media, All Rights Reserved</h5>
</BODY>
</HTML>